<template>
  <div class="E-wraper-header">
    <div class="wrap-left">
      <router-link
        tag="div"
        :to="`/`"
        class="wrap-logo bg-image-cover"
        :style="`background-image: url('${logo}');`"
        replace
      />
      <el-button-group>
        <el-button size="mini" disabled type="danger" icon="el-icon-arrow-left"></el-button>
        <el-button size="mini" type="danger" icon="el-icon-arrow-right"></el-button>
      </el-button-group>
      <div class="wrap-search">
        <el-popover
          popper-class="el-popover-search-result"
          placement="bottom-start"
          width="unset"
          trigger="focus"
          v-model="search_popover"
        >
          <E-wrap-search-result
            :search_key="search_key"
            @onSearch="onSearch"
            :tags="search_history_tags"
            @onClearHistoryTag="onClearHistoryTag"
            :search_suggest="search_suggest"
          />
          <el-input
            v-model="search_key"
            @keydown.enter.native="onSearch(search_key)"
            @click.native="search_popover=true"
            @input="onGetKey(search_key)"
            placeholder="搜索 音乐、视频、歌词、电台"
            slot="reference"
            size="mini"
          >
            <i
              @click.stop="onSearch(search_key)"
              @mousedown.prevent
              class="el-icon-search el-input__icon"
              slot="suffix"
            />
          </el-input>
        </el-popover>
      </div>
    </div>
    <div class="wrap-right">
      <div class="user" v-if="profile">
        <el-avatar
          @click.native="$router.replace({name:'personal'})"
          :size="25"
          icon="el-icon-user"
          :src="profile.avatarUrl"
        ></el-avatar>
        <el-popover
          placement="bottom"
          v-model="user_popover"
          trigger="click"
          popper-class="el-popover-no-border"
        >
          <E-user-panel @close="user_popover=false" />
          <span slot="reference" class="user-name text-ellipsis">
            {{profile.nickname}}
            <i class="el-icon-caret-bottom" />
          </span>
        </el-popover>
      </div>
      <div class="user" v-else>
        <el-avatar @click.native="$emit('onClick','showLogin')" :size="25" icon="el-icon-user"></el-avatar>
        <span @click="$emit('onClick','showLogin')" class="user-name text-ellipsis">
          未登录
          <i class="el-icon-caret-bottom" />
        </span>
      </div>
      <div class="btn-item">
        <i class="el-icon-bell" />
      </div>
      <div class="btn-item">
        <i @click="$emit('onClick','nav_toggle')" class="el-icon-setting" />
      </div>
      <i class="cutting-line" />
      <div class="btn-item">
        <i @click="handleFullScreen" class="fa fa-arrows-alt" />
      </div>
    </div>
  </div>
</template>

<script>
import logo from '@/assets/logo.png';
import Tool from '@/plug-in/Tool';
import { mapState } from 'vuex';

export default {
  components: {
    'E-wrap-search-result': () => import('./E-wrap-search-result'),
    'E-user-panel': () => import('./E-user-panel')
  },
  data() {
    return {
      logo,
      search_key: '',
      search_popover: false,
      search_history_tags: [],
      search_suggest: [],
      search_timer: null,
      user_popover: false
    };
  },
  computed: {
    ...mapState('user', ['profile'])
  },
  methods: {
    createHistoryTag(key) {
      const arr = ['', 'success', 'info', 'warning', 'danger'];
      const len = arr.length;
      const tag = { name: key, type: arr[Tool.randomNum(0, len)] };
      this.onClearHistoryTag(tag);
      this.search_history_tags = [tag, ...this.search_history_tags];
    },
    onClearHistoryTag(tag) {
      if (!tag) {
        this.search_history_tags = [];
        return;
      }
      this.search_history_tags = this.search_history_tags.filter((it, i) => it.name !== tag.name);
    },
    onGetKey(keywords) {
      if (!keywords) return;
      // this.search_suggest = [];
      clearTimeout(this.search_timer);
      this.search_timer = setTimeout(() => {
        // eslint-disable-next-line no-return-assign
        this.$api.get('search_suggest', { keywords }, true).then(({ result }) => this.search_suggest = result);
      }, 500);
    },
    onSearch(key) {
      this.search_popover = false;
      this.search_key = key;
      if (!key) return;
      this.createHistoryTag(key);
      this.onGetKey(key);
      this.$router.replace(`/search/${key.split('/')[0]}`);
    },
    // 全屏事件
    handleFullScreen() {
      const element = document.documentElement;
      // 判断是否已经是全屏
      // 如果是全屏，退出
      if (this.fullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
        console.log('已还原！');
      } else { // 否则，进入全屏
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
          // IE11
          element.msRequestFullscreen();
        }
        console.log('已全屏！');
      }
      // 改变当前全屏状态
      this.fullscreen = !this.fullscreen;
    }
  }
};
</script>

<style lang="scss">
.el-popover-search-result {
  padding: 10px 0;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
}
.E-wraper-header {
  background: rgb(198, 47, 47);
  color: #fff;
  height: 50px;
  padding-left: 10px;
  cursor: default;
  display: flex;
  align-items: center;
  justify-content: space-between;
  & > .wrap-left {
    display: flex;
    align-items: center;
    & > .wrap-logo {
      display: inline-block;
      width: 140px;
      background-size: 70%;
      margin-right: 30px;
      height: 30px;
    }
    & > .el-button-group {
      margin-right: 20px;
      & > .el-button {
        padding: 4px 6px;
        &.el-button--danger {
          background-color: #c62f2f;
          border-color: rgb(168, 40, 40);
          color: #fff;
          &.is-disabled {
            color: rgba(255, 255, 255, 0.3);
          }
          &:active {
            background-color: rgb(177, 35, 35);
            color: #444;
          }
        }
      }
    }
    & > .wrap-search {
      display: inline-block;
      margin-right: 10px;
      .el-input {
        width: 260px;
        & > input {
          background: transparent;
          border-radius: 14px;
          border: none;
          background: rgb(168, 40, 40);
          color: #fff;
          &::placeholder {
            color: rgb(199, 115, 115);
          }
        }
        & > .el-input__suffix {
          cursor: pointer;
          transition: all 0s;
          &:hover {
            color: #fff;
          }
          i {
            transition: all 0.2s;
          }
        }
      }
    }
  }
  & > .wrap-right {
    float: right;
    padding: 0 10px;
    line-height: 30px;
    & > .user {
      display: inline-block;
      vertical-align: middle;
      margin-right: 20px;
      .el-avatar {
        cursor: pointer;
      }
      span {
        vertical-align: middle;
        &.el-avatar {
          margin-right: 8px;
        }
        &.user-name {
          display: inline-block;
          min-width: 50px;
          max-width: 150px;
          text-align: center;
          color: #ccc;
          cursor: pointer;
          &:hover {
            color: #fff;
          }
        }
      }
    }
    & > .cutting-line {
      display: inline-block;
      width: 1px;
      height: 25px;
      background: rgb(168, 40, 40);
      vertical-align: middle;
      margin: 0 8px;
    }
    & > .btn-item {
      display: inline-block;
      width: 30px;
      height: 30px;
      text-align: center;
      vertical-align: middle;
      & > i {
        cursor: pointer;
        color: #ccc;
        &:hover {
          color: #fff;
        }
      }
    }
  }
}
</style>
